<template>
  <n-modal v-model:show="showModal">
    <div class="iframe-container">
      <iframe
        :src="src"
        frameborder="0"
        style="width: 100%; height: 100%; background-color: #ffffff"
      ></iframe>
    </div>
  </n-modal>
  <n-button
    color="#000000"
    circle
    class="closeBtn"
    @click="closeIframe"
    v-if="showCloseBtn"
    draggable="true"
  >
    <template #icon>
      <n-icon size="24">
        <Close />
      </n-icon>
    </template>
  </n-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { sendRequest } from '@/utils/api'
import { NModal, NButton, NIcon } from 'naive-ui'
import { Close } from '@vicons/ionicons5'
import { useTagStore } from '@/stores/layout'
import router from '@/router'

const tags = useTagStore().tags
console.log('tags: ', tags)
const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

const showModal = ref(false)
const showCloseBtn = ref(false)
// 获取数字运维中心路径
const src = ref('')
const singleLogin = async () => {
  const [error, res] = await sendRequest({
    module: 'sys',
    api: 'singleLogin'
  })
  if (error) return
  if (res.code != 0) return
  src.value = res.data
  showModal.value = true
  showCloseBtn.value = true
  // 删除当前标签
  if (tags.length) tags.splice(index, 1)
}
singleLogin()
const closeIframe = () => {
  showModal.value = false
  showCloseBtn.value = false
  // 跳转到上一条路由(重刷后无标签返回首页)
  if (tags.length > 1) {
    let lastRoutePath = tags[index - 1].path
    router.push({ path: lastRoutePath })
  } else {
    router.push({ path: '/' })
  }
}
</script>
<style lang="scss" scoped>
.iframe-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.closeBtn {
  width: 48px;
  height: 48px;
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 9999;
}
</style>
